<script>
import ACom from '@/components/a.vue'

export default {
  name: 'App',
  components: { ACom },
  data() {
    return {
      smallScreenMaxWidth: 900,
      smallScreen: false,
      showSidebar: false,
      ticking: false,
      resizeObserver: null,
    }
  },
  mounted() {
    this.resizeObserver = new ResizeObserver(() => {
      if (this.ticking) return
      this.ticking = true
      requestAnimationFrame(() => {
        this.ticking = false
      })

      if (window.innerWidth > this.smallScreenMaxWidth) {
        this.smallScreen = false
        this.showSidebar = true
      } else {
        this.smallScreen = true
        this.showSidebar = false
      }
    })

    this.resizeObserver.observe(document.body)
  },
  beforeDestroy() {
    this.resizeObserver.unobserve(document.body)
  },
}
</script>

<template>
  <div class="container">
    <div v-if="smallScreen" class="menu-btn">
      <el-button type="text" @click="showSidebar = true">
        <i class="el-icon-menu"></i>
        菜单
      </el-button>
    </div>

    <div class="sidebar-wrapper">
      <Sidebar v-if="!smallScreen" />

      <el-drawer
        v-if="smallScreen"
        :visible.sync="showSidebar"
        direction="ltr"
        :show-close="false"
        :with-header="false"
      >
        <Sidebar @select-menu="showSidebar = false" />
      </el-drawer>
    </div>

    <div class="page-content">
      <ACom />

      <div class="wrapper">
        <router-view />
      </div>
    </div>
  </div>
</template>

<style scoped>
.container {
  min-height: 100vh;

  .menu-btn {
    height: 50px;
    display: none;
    align-items: center;
    padding-left: 18px;
    border-bottom: 1px solid #dcdfe6;
    background-color: #fff;
    position: sticky;
    z-index: 999;
    transition: top 0.2s linear;

    .el-button {
      line-height: normal;
    }
  }

  .page-content {
    padding-left: 200px;

    .wrapper {
      padding: 20px 30px;
    }
  }
}

@media (max-width: 900px) {
  .container {
    .menu-btn {
      display: flex;
    }

    .sidebar-wrapper :deep(.el-drawer) {
      width: var(--sidebar-width) !important;

      .el-drawer__body {
        padding: 0;
      }

      .sidebar {
        position: relative;
        top: 0;
      }
    }

    .page-content {
      padding-left: 0;

      .wrapper {
        padding: 20px 20px;
      }
    }
  }
}
</style>
